<template>
  <div class="d-flex h-100">
    <div class="left-nav h-100">
      <LeftNav class="left-menu" :type="type"></LeftNav>
    </div>

    <div class="right-panel flex-auto h-100">
      <TopNav />
      <div class="right-content b-box br-1 flex-auto">
        <TagsTab />
        <div class="main-content">
        <router-view v-slot="{ Component, route }">
          <keep-alive :include="cachedRoutes">
            <component :is="Component" :key="route.path" class="bg-white"/>
          </keep-alive>
        </router-view>
      </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import LeftNav from '../components/left-menu.vue';
import TopNav from '../components/TopNav.vue';
import { useRouter } from 'vue-router';
import { computed } from 'vue';
  import TagsTab from '../components/tags-tab.vue';
  import { useSysStore } from '../store';

const router = useRouter();
  const sysStore = useSysStore()
const type = computed(() => {
  return router.currentRoute.value.params.type;
});

  const cachedRoutes = computed(sysStore.getCachedRoutes)

</script>

<style scoped lang="scss">
.right-panel {
  overflow: hidden;
  background-color: #f2f3f5;

  .right-content {
    position: relative;

      .main-content {
        height: calc(100vh - 100px);
    overflow-y: auto;
  }
}
  }

</style>
